<template>
	<div class="container">
		<el-container>
			<el-header>
				<div style="width: 200px;">头像</div>
				<div class="top-menu">
					<div>
						<el-menu :default-active="activeIndex+''" class="el-menu-demo" mode="horizontal"
							background-color="#2b83f9" text-color="#ccc" active-text-color="#fff" @select="selectInd">
							<el-menu-item :index="index|numToString" v-for="(item,index) in this.menuList" :key="index">
								<template slot="title">
									<i></i>
									<span>{{item.title}}</span>
								</template>
							</el-menu-item>
						</el-menu>
					</div>

					<div class="userLogin" @click="tabShow">
						<img src="../assets/img1.jpg" />
						<i class="el-icon-caret-bottom"></i>
					</div>
					<!-- 退出 -->
					<div class="box-card" v-show="showBox">
						<div class="clearfix">
							<div class="user-avatar">
								<img style="width: 32px;height: 32px;border-radius: 50%;" src="../assets/img1.jpg" />
							</div>
							<div class="user-name">超级管理员</div>
						</div>
						<div class="setting">
							<div>
								<div class="icon">
									<i class="el-icon-s-tools"></i>
								</div>
								<div>
									<span>账号设置</span>
								</div>
							</div>
							<div>
								<div class="icon">
									<i class="el-icon-s-tools"></i>
								</div>
								<div>
									<span @click="loginOut">退出登录</span>
								</div>
							</div>
						</div>
					</div>

				</div>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu class="el-menu-vertical-demo" background-color="#fff" active-text-color="#2b83f9" router>
						<el-menu-item :index="item.menu_url" v-for="(item,ind) in leftMenuList" :key="ind">
							<span slot="title">{{item.title}}</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<div class="user-router">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: '/Student' }"><span
									style="font-size: 18px; color: #8f8f8f;font-weight: bold;">学员管理</span>
							</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<div class="router">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import common from '../assets/common/mixins.js'
	export default {
		// 注册公共组件
		mixins:[common],
		// 组件名称
		name: 'demo',
		// 组件状态值
		data() {
			return {
				menuList: {},
				showBox: false,
				activeIndex: 0,
				leftMenuList: [],
				nums: 0
			}
		},
		// 组件方法
		methods: {
			tabShow() {
				this.showBox = !this.showBox;
			},
			// 获取左侧和顶部数据
			async getUserMenus() {
				try {
					const {
						data: res
					} = await this.$http.post("menu/info")
					if (res.code !== 200) {
						return this.$message.error(res.msg)
					}
					this.menuList = res.rows;
				} catch (e) {
					this.$message.error(e)
				}
			},
			selectInd(ind) {
				console.log(ind)
				this.activeIndex = ind;
				this.nums = Number(ind);
				this.leftMenuList = this.menuList[this.nums].children;

			},
			loginOut() {
				this.$confirm('确定退出?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					sessionStorage.removeItem("school_token");
					this.$router.push('/Login')
					this.$message.success('退出成功')
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出'
					});
				});
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			this.getUserMenus()
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;

		.el-container {
			position: relative;

			.el-header {

				display: flex;
				align-items: center;
				background-color: #2b83f9;


				.top-menu {
					display: flex;

					.el-menu {

						.el-menu-item {

							i {
								color: #efefef;
							}
						}
					}

					.userLogin {
						position: absolute;
						right: 20px;
						top: 15px;
						display: flex;
						align-items: center;

						img {
							width: 32px;
							height: 32px;
							border-radius: 50%;
						}

						i {
							font-size: 24px;
							color: #efefef;
						}
					}


					.box-card {
						position: absolute;
						right: 5px;
						top: 65px;
						width: 240px;
						padding: 0;
						box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
						border-radius: 4px;
						transition: transform 0.2s;
						z-index: 999;
						background-color: #FFFFFF;


						.clearfix {
							display: flex;
							height: 68px;
							align-items: center;
							border-bottom: 1px solid #efefef;

							.user-avatar {
								width: 68px;
								text-align: center;
							}

							.user-name {
								font-size: 14px;
								color: #2185f0;
								line-height: 36px;

							}
						}

						.setting {
							div {
								cursor: pointer;
								display: flex;
								align-items: center;
								height: 48px;
								line-height: 48px;

								.icon {
									width: 68px;
									text-align: center;
									display: flex;
									justify-content: center;
									font-size: 20px;
									color: #888888;
								}

								span {
									font-size: 12px;
									color: #888888;
								}
							}

							div:hover {
								background-color: #efefef;
							}
						}

					}
				}
			}

			.el-container {
				display: flex;
				flex: 1;

				.el-aside {}

				.el-menu {
					height: 100%;
				}

				.el-main {
					padding: 0px;
					flex: 1;

					.user-router {
						padding: 20px 20px 0px;
						box-sizing: border-box;
						border-bottom: 1px solid #CCCCCC;
						background-color: #FFFFFF;


					}

					.router {
						padding: 5px 10px;
						box-sizing: border-box;
					}
				}
			}
		}
	}
</style>
